import { defineComponent } from 'vue';
import {
  organizeChart
} from '@/api/home';
import SheltV2 from '../../common/SheltV2';
import Echarts from '@/components/Echarts';
import {
  ElDatePicker,
} from 'element-plus';
import './index.less';
import ItemTable from './ItemTable';

export default defineComponent({
  name: 'MonthIndicator',
  setup() {
const tableItem = ref();
    const date = reactive({
      chart: new Date(),
      list: new Date(),
      totalRow:[]
    }) as AnyObject;

    const option = ref({
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'cross',
          crossStyle: {
            color: '#999'
          }
        },
      },
      color: ['#8400ff', '#98d87d', '#108de9', '#bfbf00', '#eb833c'],
      legend: {
        data: [],
        icon: 'circle',
        itemGap: 30,
        itemWidth: 10
      },
      grid: {
        left: 50
        // right: '100%',
        // top: "10%",
        // bottom: '90%'
      },
      xAxis:
      {
        type: 'category',
        data: [],
        axisPointer: {
          type: 'shadow'
        },
        axisTick: {
          show: false
        },
        axisLine: {
          show: false
        },
      },

      yAxis: {
        type: 'value',
        axisLabel: {
          formatter: '{value}%'
        }
      },
      series: []
    }) as any;
    const detailSlots = ref({
      detail: () => {
        return (
          <div class="item_right">
            <ElDatePicker
              v-model={date.chart}
              type="year"
              class="month_selector"
              range-separator="/"
              clearable={false}
              // @ts-ignore
              onChange={complaintChartList}
            />
          </div>
        );
      }
    });

    const viewDetail = () => {
      tableItem.value.visible = true;
    };

    const complaintChartList = (date?: Date) => {
      const year = date?.getFullYear();
      console.log(year);

      organizeChart(year).then(res => {
        option.value.series = res.data.list.map((item: any) => ({
          ...item, type: 'line', smooth: true, symbol: 'none', tooltip: {
            valueFormatter: function (value: string) {
              return value + '%';
            }
          }
        }));
        option.value.legend.data = res.data.legend;
        option.value.xAxis.data = res.data.xAxis;
      })
    };

    complaintChartList();

    return () => (
      <SheltV2
        title="组织绩效"
        more="查看详情"
        v-slots={detailSlots.value}
        onViewDetail={viewDetail}
      >
        <Echarts option={option.value} />
        <ItemTable ref={tableItem} />
      </SheltV2>
    );
  }
});
